<!--
 * 导航栏
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-navbar" :class="classes" :style="styles">
        <!-- 状态栏 -->
        <view class="pure-status-bar" v-if="statusBar"></view>

        <!-- 导航栏 -->
        <view class="pure-navigation-bar">
            <!-- 左侧 -->
            <view class="pure-navigation-bar-left">
                <slot name="left" v-if="$slots.left"></slot>
                <view class="pure-navigation-bar-left-content" v-else>
                    <!-- 返回 -->
                    <slot name="back" v-if="$slots.back"></slot>
                    <view class="pure-navigation-bar-back" v-else-if="back" :hover-class="hoverClass" @tap="handleBack">
                        <!-- 返回图标 -->
                        <view class="pure-navigation-bar-back-icon" v-if="backIcon">
                            <pure-icon :name="backIcon"></pure-icon>
                        </view>

                        <!-- 返回文字 -->
                        <text class="pure-navigation-bar-back-text" v-if="backText">{{ backText }}</text>
                    </view>

                    <!-- 左侧其他操作按钮 -->
                    <slot name="leftBtns" v-if="$slots.leftBtns"></slot>
                    <view class="pure-navigation-bar-btns pure-navigation-bar-left-btns" v-if="showLeftBtns">
                        <template v-for="(_btn, _index) in leftBtns" :key="_index">
                            <!-- 按钮 -->
                            <view
                                class="pure-navigation-bar-btn pure-navigation-bar-left-btn"
                                :hover-class="_btn?.hoverClass || hoverClass"
                                :class="[_btn?.disabled ? _btn?.disabledClass || disabledClass : '', _btn?.class || '']"
                                :style="_btn?.style"
                                v-if="!_btn?.hide"
                            >
                                <!-- 按钮图标 -->
                                <view class="pure-navigation-bar-btn-icon pure-navigation-bar-left-btn-icon">
                                    <pure-icon :name="_btn.icon" :style="_btn.iconStyle" :class="_btn.iconClass" v-bind="_btn.iconProps" v-if="_btn?.icon"></pure-icon>
                                </view>

                                <!-- 按钮文字 -->
                                <text class="pure-navigation-bar-btn-text pure-navigation-bar-left-btn-text" v-if="_btn?.text" :style="_btn.textStyle" :class="_btn.textClass">
                                    {{ _btn.text }}
                                </text>

                                <!-- 按钮功能 -->
                                <view class="pure-navigation-bar-btn-functionality">
                                    <pure-button
                                        :disabled="_btn?.disabled"
                                        v-bind="_btn?.props"
                                        @onClick="handleBtnClick(_btn)"
                                        @getphonenumber="handleGetPhoneNumber($event, _btn)"
                                        @getuserinfo="handleGetUserInfo($event, _btn)"
                                        @error="handleError($event, _btn)"
                                        @opensetting="handleOpenSetting($event, _btn)"
                                        @launchapp="handleLaunchApp($event, _btn)"
                                        @contact="handleContact($event, _btn)"
                                        @chooseavatar="handleChooseAvatar($event, _btn)"
                                        @agreeprivacyauthorization="handleAgreePrivacyAuthorization($event, _btn)"
                                        @addgroupapp="handleAddGroupApp($event, _btn)"
                                        @chooseaddress="handleChooseAddress($event, _btn)"
                                        @chooseinvoicetitle="handleChooseInvoiceTitle($event, _btn)"
                                        @subscribe="handleSubscribe($event, _btn)"
                                        @login="handleLogin($event, _btn)"
                                        @im="handleIM($event, _btn)"
                                    ></pure-button>
                                </view>
                            </view>
                        </template>
                    </view>
                </view>
            </view>

            <!-- 中间 -->
            <view class="pure-navigation-bar-title">
                <slot name="title" v-if="$slots.title"></slot>
                <!-- 标题 -->
                <text v-else>{{ title }}</text>
            </view>

            <!-- 右侧 -->
            <view class="pure-navigation-bar-right">
                <slot name="right" v-if="$slots.right"></slot>
                <view class="pure-navigation-bar-right-content" v-else>
                    <!-- 右侧其他操作按钮 -->
                    <slot name="rightBtns" v-if="$slots.rightBtns"></slot>
                    <view class="pure-navigation-bar-btns pure-navigation-bar-right-btns" v-if="showRightBtns">
                        <template v-for="(_btn, _index) in rightBtns" :key="_index">
                            <!-- 按钮 -->
                            <view
                                class="pure-navigation-bar-btn pure-navigation-bar-right-btn"
                                :hover-class="_btn?.hoverClass || hoverClass"
                                :class="[_btn?.disabled ? _btn?.disabledClass || disabledClass : '', _btn?.class || '']"
                                :style="_btn?.style"
                                v-if="!_btn?.hide"
                            >
                                <!-- 按钮图标 -->
                                <view class="pure-navigation-bar-btn-icon pure-navigation-bar-right-btn-icon">
                                    <pure-icon :name="_btn.icon" :style="_btn.iconStyle" :class="_btn.iconClass" v-bind="_btn.iconProps" v-if="_btn?.icon"></pure-icon>
                                </view>

                                <!-- 按钮文字 -->
                                <text class="pure-navigation-bar-btn-text pure-navigation-bar-right-btn-text" v-if="_btn?.text" :style="_btn.textStyle" :class="_btn.textClass">
                                    {{ _btn.text }}
                                </text>

                                <!-- 按钮功能 -->
                                <view class="pure-navigation-bar-btn-functionality">
                                    <pure-button
                                        :disabled="_btn?.disabled"
                                        v-bind="_btn?.props"
                                        @onClick="handleBtnClick(_btn)"
                                        @getphonenumber="handleGetPhoneNumber($event, _btn)"
                                        @getuserinfo="handleGetUserInfo($event, _btn)"
                                        @error="handleError($event, _btn)"
                                        @opensetting="handleOpenSetting($event, _btn)"
                                        @launchapp="handleLaunchApp($event, _btn)"
                                        @contact="handleContact($event, _btn)"
                                        @chooseavatar="handleChooseAvatar($event, _btn)"
                                        @agreeprivacyauthorization="handleAgreePrivacyAuthorization($event, _btn)"
                                        @addgroupapp="handleAddGroupApp($event, _btn)"
                                        @chooseaddress="handleChooseAddress($event, _btn)"
                                        @chooseinvoicetitle="handleChooseInvoiceTitle($event, _btn)"
                                        @subscribe="handleSubscribe($event, _btn)"
                                        @login="handleLogin($event, _btn)"
                                        @im="handleIM($event, _btn)"
                                    ></pure-button>
                                </view>
                            </view>
                        </template>
                    </view>

                    <!-- 胶囊按钮 -->
                    <view class="pure-navigation-bar-saft-menu-button"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";

    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: [
            "back",
            "btnClick",
            "getphonenumber",
            "getuserinfo",
            "error",
            "opensetting",
            "launchapp",
            "contact",
            "chooseavatar",
            "agreeprivacyauthorization",
            "addgroupapp",
            "chooseaddress",
            "chooseinvoicetitle",
            "subscribe",
            "login",
            "im",
        ],
        data() {
            return {
                // 胶囊按钮
                safeMenuButtonRect: null,
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 标题居左
                if (this.left) classes.push("pure-navigation-bar-left-title");

                return classes;
            },

            // styles
            styles() {
                const styles = [];

                // 右侧是否流出胶囊按钮区域
                if (this.safeMenuButton) styles.push(`--pure-navigation-bar-saft-menu-button-width: ${this.safeMenuButtonRect?.width || 0}px`);

                return styles;
            },

            // 是否显示左侧按钮组
            showLeftBtns() {
                return this.leftBtns.filter((_btn) => !_btn?.hide).length > 0;
            },

            // 是否显示右侧按钮组
            showRightBtns() {
                return this.rightBtns.filter((_btn) => !_btn?.hide).length > 0;
            },
        },
        mounted() {
            // #ifndef MP-LARK
            this.safeMenuButtonRect = uni.getMenuButtonBoundingClientRect?.();
            // #endif

            // 飞书小程序没有 getMenuButtonBoundingClientRect 函数，设置一个固定的值
            //#ifdef MP-LARK
            this.safeMenuButtonRect = {
                width: 80,
            };
            // #endif
        },
        methods: {
            // 返回
            handleBack() {
                if (this.autoBack) {
                    uni.navigateBack({
                        delta: parseInt(this.backDelta),
                    });
                    return;
                }
                this.$emit("back");
            },

            // 按钮点击
            handleBtnClick(_btn) {
                if (_btn?.disabled) return;
                this.$emit("btnClick", _btn);
            },

            // getPhoneNumber
            handleGetPhoneNumber(e, _btn) {
                this.$emit("getphonenumber", e, _btn);
            },

            // getUserInfo
            handleGetUserInfo(e, _btn) {
                this.$emit("getuserinfo", e, _btn);
            },

            // error
            handleError(e, _btn) {
                this.$emit("error", e, _btn);
            },

            // openSetting
            handleOpenSetting(e, _btn) {
                this.$emit("opensetting", e, _btn);
            },

            // launchApp
            handleLaunchApp(e, _btn) {
                this.$emit("launchapp", e, _btn);
            },

            // contact
            handleContact(e, _btn) {
                this.$emit("contact", e, _btn);
            },

            // chooseAvatar
            handleChooseAvatar(e, _btn) {
                this.$emit("chooseavatar", e, _btn);
            },

            // agreePrivacyAuthorization
            handleAgreePrivacyAuthorization(e, _btn) {
                this.$emit("agreeprivacyauthorization", e, _btn);
            },

            // addGroupApp
            handleAddGroupApp(e, _btn) {
                this.$emit("addgroupapp", e, _btn);
            },

            // chooseAddress
            handleChooseAddress(e, _btn) {
                this.$emit("chooseaddress", e, _btn);
            },

            // chooseInvoiceTitle
            handleChooseInvoiceTitle(e, _btn) {
                this.$emit("chooseinvoicetitle", e, _btn);
            },

            // subscribe
            handleSubscribe(e, _btn) {
                this.$emit("subscribe", e, _btn);
            },

            // login
            handleLogin(e, _btn) {
                this.$emit("login", e, _btn);
            },

            // im
            handleIM(e, _btn) {
                this.$emit("im", e, _btn);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
